<template>
    <div class="student">
        <h1>姓名：{{ name }}</h1>
        <h1>年龄：{{ age }}</h1>
        <h1>联系电话:{{ tel }}</h1> 
        <h1>爱好</h1>
        <ul>
            <li v-for="like in likes">
                <h2>{{ like }}</h2>
            </li>
        </ul>
        <h1>课程id：{{ course.id }}，课程名称：{{ course.name }}</h1>
        <h1>{{obj.a.b.c.d.e.f}}</h1>
    </div>
</template>

<script setup lang="ts" name="Student">
    //1、引入ref
    import { ref,reactive } from 'vue'
    //通过ref创建基本数据类型的响应式数据
    let name = ref('学生张三');
    let age = ref(666);
    let tel = 13636363366;
    //通过ref创建数组的响应式数据
    let likes = ref(
        [
            "学习", "看书", "abac", "烫头"
        ]
    )
    //通过ref创建对象类型(object)的响应式数据
    let course =ref({
        id:1,
        name:'Java开发课程设计'
    })
    //ref()函数创建对象类型的响应式数据其实是通过reactive实现的。
    let obj=ref({
        a:{
            b:{
                c:{
                    d:{
                        e:{
                            f:666
                        }
                    }
                }
            }
        }
    })
    //使用reactive创建响应数据，只能是对象类型的。reactive比较适合多层对象调用
    let obj1=reactive({
        a:{
            b:{
                c:{
                    d:{
                        e:{
                            f:666
                        }
                    }
                }
            }
        }
    })


</script>


<style scoped>
.student {
    background-color: aquamarine;
    /*背景颜色 */
    padding: 30px;
    /*内边距 */
    box-shadow: 0 0 10px;
    /*边框阴影 */
    border-radius: 10px;
}

/* 标签选择器 */
button {
    margin: 10px;
}
</style>
